<template>
  <yd-infinitescroll :callback="loadList" ref="infiniteScroll">
    <w-empty slot="list" v-if="!goodsList.length"></w-empty>
    <div slot="list" v-else>
      <yd-list theme="10">
        <yd-list-item class="m-collect-item" v-for="(goods, index) in goodsList" :key="index" @click.native="$router.push(`/goods/${goods.goods_id}`)">
          <img slot="img" v-lazy="goods.goods_photo">
          <div slot="title" class="nname">{{goods.goods_name}}</div>
          <div slot="title" class="price">¥{{goods.goods_current_price}}.00</div>
          <div slot="title" class="delete" @click.stop="deleteCollect(goods.goods_id)"></div>
        </yd-list-item>
      </yd-list>
    </div>
    <!-- 数据全部加载完毕显示 -->
    <span slot="doneTip">啦啦啦，啦啦啦，没有数据啦~~</span>
    <!-- 加载中提示，不指定，将显示默认加载中图标 -->
    <p slot="loadingTip">加载中...</p>
  </yd-infinitescroll>
</template>

<script>
  import { apiFavoriteGoods } from 'js/api'
  import { mapGetters, mapActions } from 'vuex'
  export default {
    data() {
      return {
        goodsList: [],
        curPage: 1,
        params: {
          goodsIds: [],
          access_token: ''
        }
      }
    },
    created() {
      this.fetchFavoriteGoods()
    },
    methods: {
      ...mapActions(['deleteCollectGoods']),
      fetchFavoriteGoods() {
        apiFavoriteGoods(this.token).then(data => {
          this.goodsList = data.favoriteList || []
          // if (this.curPage >= data.totalPage) {
          //   this.$refs.infiniteScroll.$emit('ydui.infinitescroll.loadedDone')
          //   return
          // }
          // this.$refs.infiniteScroll.$emit('ydui.infinitescroll.finishLoad')
          // this.curPage++
        })
      },
      // 删除收藏
      deleteCollect(id) {
        this.deleteCollectGoods({
          goodsList: {goods_id: [id], access_token: this.token},
          callback: data => {
            this.$toast('已删除', () => {
              this.fetchFavoriteGoods()
            })
          }
        })
      },
      loadList() {
        this.fetchFavoriteGoods()
      }
    },
    computed: {
      ...mapGetters(['token'])
    }
  }
</script>

<style lang="scss">
  .m-collect-item {
    .nname {
      height: 90%;
    }
    .delete {
      background: url(./img/btn_delete.png) no-repeat center center;
      background-size: cover;
      height: 0.4rem;
      width: 0.4rem;
      position: absolute;
      right: 0px;
      bottom: 0.02rem;
    }
    .price {
      color: #ef5c6e;
    }
  }
</style>